import React, { Component } from 'react'
// 合成事件传播顺序
// 先合成捕获再原生捕获，=> 冒泡原生 => 冒泡合成

class App extends Component {
  clickCapture = () => {
    console.log('合成事件 - 捕获 - btn')
  }
  click = (e) => {
    e.stopPropagation()
    console.log('合成事件 - 冒泡 - btn')
  }

  // 挂载完毕 -- 生命周期
  componentDidMount() {
    const btn = document.getElementById('btn')

    btn.addEventListener(
      'click',
      (e) => {
        // e.stopPropagation()
        console.log('原生事件 - 捕获 - btn')
      },
      true
    )

    btn.addEventListener(
      'click',
      (e) => {
        // 它会把自身中已绑的事件给执行完毕,下级事件会阻止
        // e.stopPropagation()
        // 强制阻止,只把自己事件执行完毕后,不去执行别的了
        e.stopImmediatePropagation()
        console.log('原生事件 - 冒泡1 - btn')
      },
      false
    )
    btn.addEventListener(
      'click',
      (e) => {
        console.log('原生事件 - 冒泡2 - btn')
      },
      false
    )
  }

  render() {
    return (
      <div>
        <div id="btn" onClickCapture={this.clickCapture} onClick={this.click}>
          点击一下
        </div>
      </div>
    )
  }
}

export default App
